<template>
    <div>
        <div>
            <input type="text"
            placeholder="请输入任务名称"
            v-model="value"
            @keydown.enter="enter"
            >
        </div>
    </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
export default defineComponent({
    name: 'navHeader',
    setup(props, ctx){
        let value = ref('')
        let enter = () =>{
            // 把输入框的内容传递给父组件
            ctx.emit('add', value.value)
            // 按回车确认
            console.log(value.value)
            value.value = ''
        }
        return {
            value,
            enter
        }
    }
})
</script>

<style scoped lang='scss'>
input{
    margin-bottom: 20px;
}
</style>